<template>
	<view class="content">
		<view class="order">
			<view class="infoBlock">
				*姓名：<input type="text" v-model="orderInfo.userName" placeholder="请输入订单联系人姓名" />
			</view>
			<view class="infoBlock">
				*电话：<input type="number" v-model="orderInfo.phone" @blur="checkPhone($event)"
					placeholder="请输入订单联系人电话" />
			</view>
			<view class="infoBlock">
				*地址：<input type="text" v-model="orderInfo.address" placeholder="请输入订单联系人详细地址(精确到门牌号)" />
			</view>
			<view class="infoBlock">
				请选择服务人员：<view class="operators">
					<view class="operator_box" v-for="operator in moocOperators" :key="operator" @click="selOperator(operator)">
						<image :src="operator.operatorpic" mode="aspectFill"></image>
						<text>{{operator.operatorname}}</text>
					</view>
					您当前选择的是：
					<view v-if="operator!=''">{{operator.operatorname}}</view>
					<view v-else style="color: #b1b1b1;">还未进行选择</view>
				</view>
			</view>
			<view class="infoBlock">
				备注：<textarea placeholder="请添加您的备注" v-model="orderInfo.remarks" maxlength="200"></textarea>
			</view>
			<view class="infoBlock">
				价格：价格面议
			</view>
		</view>
		<button @click="creatOrder">创建订单</button>
	</view>
</template>

<script>
	import currentdate from "../../../utils/currentDate.js"
	export default {
		data() {
			return {
				options:null,
				orderSerialNumber: null,
				orderInfo: {
					userName: "",
					phone: "",
					address: "",
					remarks: ""
				},
				moocOperators:[
					{
						operatorid:101112001,
						operatorname:"王德全",
						operatorphone:13791260093,
						operatorpic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1407%2F31%2Fc1%2F36901445_36901445_1406782935268.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651823261&t=c3c07f9e0b96b2997ffe92ef97321c15"
					},
					{
						operatorid:101112002,
						operatorname:"李玉刚",
						operatorphone:13784588065,
						operatorpic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021221064F5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651823261&t=b68bc368b1c2b73167f8019b3d092bbb"
					},
					{
						operatorid:101112003,
						operatorname:"贾仁",
						operatorphone:19678545656,
						operatorpic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZP0160B9C-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651823261&t=6f4027e0a90c825f2ddc03c9f63e53b9"
					}
				],
				operator:''
			}
		},
		onLoad(options) {
			let opt = options
			this.options = opt
			//获取修理工信息
			this.getOperators()
			
		},
		methods: {
			getOperators:function(){
				uni.request({
					url:"http://localhost:8080/operators",
					method:"GET",
					success: (res) => {
						console.log(res);
						moocOperators = res.data.data
					}
				})
			},
			checkPhone: function(e) {
				var reg =
					/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				if (!reg.test(e.detail.value)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号"
					})
				}

			},
			selOperator:function(ope){
				console.log(ope);
				let operator = ope
				this.operator = operator
			},
			creatOrder: function() {
				console.log(timeStamp);
				if (this.orderInfo.userName != null &&
					this.orderInfo.phone != null &&
					this.orderInfo.address != null) {
						var timeStamp = currentdate.formatTime(new Date());
						let p = this.orderInfo.phone.substr(7)
						let orderSerialNumber = p+timeStamp
						this.orderSerialNumber = orderSerialNumber
						let data = {
							orderType:{
								serverCode:this.options.serverCode,
								applianceCode:this.options.applianceCode
							},
							orderSerialNumber:this.orderSerialNumber,
							username:this.orderInfo.userName,
							phone:this.orderInfo.phone,
							address:this.orderInfo.address,
							remarks:this.orderInfo.remarks,
							operator:this.operator.operatorid
						}
						console.log(data);
				} else {
					uni.showToast({
						icon: "none",
						title: "请填写完整信息",
					})
				}
			}
		}
	}
</script>

<style>
	@import url("./createorder.css");
</style>
